<script setup lang="ts">
import { type FormData } from '@/api/api-manage/create'
import { validateFileUploaded } from '@/components/upload-file/validator'
import useDictStore from '@/store/modules/dict'
import { FormInstance, FormRules } from 'element-plus'
import { computed, ref } from 'vue'

const props = defineProps<{
  formData: FormData
}>()

const emit = defineEmits<{
  (e: 'update:formData', type: FormData): void
  (e: 'next'): void
}>()

const formData = computed({
  get() {
    return props.formData
  },
  set(value) {
    emit('update:formData', value)
  },
})
const dictStore = useDictStore()
const { api_type, api_catalog, base_algorithm, api_auth_type, api_encryption_type } =
  dictStore.getDicts(
    'api_type',
    'api_catalog',
    'api_auth_type',
    'api_encryption_type',
    'base_algorithm',
    'api_type'
  )
const formRef = ref<FormInstance>()
const isFinished = ref(true)

const rules: FormRules = {
  apiName: [{ required: true, message: '必填' }],
  apiType: [{ required: true, message: '必填' }],
  apiCatalog: [{ required: true, message: '必填' }],
  apiAuth: [{ required: true, message: '必填' }],
  apiDesc: [{ required: true, message: '必填' }],
  apiIntro: [{ required: true, message: '必填' }],
  ossId: [validateFileUploaded(isFinished), { required: true, message: '未选择文件' }],
}

function onNext() {
  formRef.value.validate((isValid) => {
    if (!isValid) return
    emit('next')
  })
}

function onUploadSuccess(data: any) {
  formData.value.apiIconPth = data.url
}
</script>

<template>
  <el-form ref="formRef" label-width="200px" :model="formData" :rules="rules">
    <el-form-item label="接口名称" prop="apiName">
      <el-input
        v-model="formData.apiName"
        show-word-limit
        placeholder="请输入接口名称"
        :maxlength="50"
      />
    </el-form-item>
    <el-form-item label="算法基础" prop="algorithmBasic">
      <el-select v-model="formData.algorithmBasic" clearable multiple placeholder="请选择算法基础">
        <el-option
          v-for="item in base_algorithm"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="算法版本" prop="version">
      <el-input
        v-model="formData.version"
        show-word-limit
        placeholder="请输入算法版本"
        :maxlength="50"
      />
    </el-form-item>
    <el-form-item label="接口类型" prop="apiType">
      <el-radio-group v-model="formData.apiType">
        <el-radio v-for="item in api_type" :key="item.value" :value="item.value">
          {{ item.label }}
        </el-radio>
      </el-radio-group>
      <span class="text-gray-400">私有接口仅限本人使用，公共接口可共享给他人使用</span>
    </el-form-item>
    <el-form-item label="接口分类" prop="apiCatalog">
      <el-select v-model="formData.apiCatalog" placeholder="请选择">
        <el-option
          v-for="item in api_catalog"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="认证类型" prop="apiAuth">
      <el-select v-model="formData.apiAuth" placeholder="请选择">
        <el-option
          v-for="item in api_auth_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="数据加密" prop="encryptionType">
      <el-checkbox-group v-model="formData.encryptionType" class="ml-4">
        <el-checkbox
          v-for="item in api_encryption_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="接口简介" prop="apiIntro">
      <el-input
        v-model="formData.apiIntro"
        show-word-limit
        placeholder="请输入接口简介"
        :maxlength="100"
      />
    </el-form-item>
    <el-form-item label="接口描述" prop="apiDesc">
      <el-input
        v-model="formData.apiDesc"
        show-word-limit
        type="textarea"
        placeholder="请输入接口描述"
        resize="none"
        :rows="5"
        :maxlength="300"
      />
    </el-form-item>
    <el-form-item label="接口展示图标" prop="ossId">
      <upload-file
        v-model:finished="isFinished"
        v-model:file-ids="formData.ossId"
        accept="image/*"
        :suffix="['.jpg', '.jpeg', '.png']"
        :limit="1"
        :max="1"
        @success="onUploadSuccess"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onNext">下一步</el-button>
    </el-form-item>
  </el-form>
</template>
